<template>
	<div class="updates">
		<div class="gundong-bottom">
			<div class="line"></div>
			<div class="gundong">
				<img class="icon" src="https://static.inclusionconf.com/static/images/gundong-icon.png" alt="">
				<span>滚动浏览</span>
			</div>
		</div>
		<div class="updates-content">
			<image class="home-title" id="updates" src="https://static.inclusionconf.com/static/images/updates-title.png" mode="heightFix" alt="">

				<div class="updates-video">
					<div class="text">
						<!-- <div class="title" v-if="videoObj['title' + En] && isPc">{{ videoObj['title' + En] }}</div> -->
						<div class="content" v-if="En">
							The Inclusion Conference is China’s flagship summit hosted at Shanghai that brings together global entrepreneurs and thought leaders to explore directions of financial innovation in the era of AI, demonstrate influential practices in the scientific innovation ecosystem, and discuss how to rebuild innovation-driven growth via finance and technology. The Main Forum on September 10 in particular will feature top minds and business leaders, as well as members from China’s and Asia’s policy community.<br>
							Under the theme of “Path To Innovative Growth”, and in addition to the Main Forum, the 2025 conference will also feature more than 40 insight forums,<br>
							Global Thematic Day,10-plus Stages, a technology exhibition of nearly 10,000 square meters, a Technology Marketplace covering 5,000 square meters, an AI Innovation Contest, a Technology Job Fair and an Investor Meetup, allowing participants for deep exchanges and cooperation. The conference will be held at Shanghai Huangpu World Expo Park.
						</div>
						<div class="content" v-else>Inclusion·外滩大会是在上海举办的全球高级别金融科技和前沿科技大会，致力于搭建全球科技、金融和产业间的高规格开放对话平台，展现AI时代全球科技创新趋势呈现高能级科创生态实践，探讨以金融和科技之力重塑创新增长，助力上海打造具有全球影响力的国际金融中心和科技创新中心。 大会由外滩大会组委会主办，在上海市地方金融管理局、上海市黄浦区人民政府的大力支持下，现已成功举办3届，影响力辐射海内外。<br>
							2025 Inclusion·外滩大会主题为“重塑创新增长”，举办地在上海黄浦世博园区，大会共设1场开幕主论坛、40多场开放见解论坛、全球主题日、10多场创新者舞台、近万平米科技展览、5000平科技集市、1场科技智能创新大赛和1场科技人才招聘会，此外还有投资人Meetup等特色环节，为参会者提供深度交流与合作的机会。</div>
					</div>
					<div class="video-wrapper">
						<!-- #ifdef MP-WEIXIN -->
						<video class="video" controlslist="nodownload" disablePictureInPicture :src="videoObj.url" ref="video" controls="controls" playsinline="" poster="https://static.inclusionconf.com/static/images/updates-video1.jpg" x-webkit-airplay="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" renderer="standard" player="system"></video>
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY -->
						<video
							class="video"
						    id="myVideo"
							poster="https://static.inclusionconf.com/static/images/updates-video1.jpg"
						    :src="videoObj.url"
						    :controls="true"
						    :loop="true"
						    :muted="true"
						    :show-fullscreen-btn="false"
						    :show-play-btn="true"
						    :show-center-play-btn="true"
						    :object-fit="true"
						    :autoplay="false"
						  />
						<!-- #endif -->
						<!-- <live-player class="video" controls="controls" :src="videoObj.url"></live-player> -->
					</div>
				</div>
				<img class="profile-icon" src="https://static.inclusionconf.com/static/images/profile-icon.png" alt="">
				<!-- <div class="updates-news">
            <div class="item" v-for="(item, index) in list" :key="index" @click="link(item)">
                <span>
                    <img :src="item.coverUrl" alt="">
                </span>
                <div class="name"><small :class="isPc ? 'ellipsis1' : 'ellipsis2'">{{ item['name' + En] }}</small></div>
            </div>
        </div> -->
		</div>
	</div>
</template>

<script>
	import protal from "@/api/protal"

	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				videoObj: {},
				news: [],
				showVideo: true,
			}
		},
		created() {
			protal.getJson('updates', data => {
				this.videoObj = data
			})
		},
		mounted() {
			// this.$refs.video.addEventListener('pause', e => {
			//     this.showVideo = true
			// })

			// this.$refs.video.addEventListener('play', e => {
			//     this.showVideo = false
			// })
		},
		methods: {
			// videoFn() {
			//     this.playVideo('video')
			//     this.jsAPI('waitan_homeClick', {
			//         floor_var: '大会简介',
			//         position_var: '1',
			//         flowName_var: '大会简介',
			//         industryFirstCate_var: '无',
			//         industrySecCate_var: '无',
			//         tabName_var: '无'
			//     })
			//     this.jsAPI('waitan_overViewVideo')

			// },
			link(item) {
				if (item.linkUrl.includes('http')) {
					window.open(item.linkUrl, '_blank')
				} else {
					this.$tourer.push(item.linkUrl)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@media screen and (min-width: 768px) {
		.updates {
			width: 100%;
			// background: url(https://static.inclusionconf.com/static/images/home-bg1.jpg);
			background-color: #19234B;
			background-size: 100% 100%;
			position: relative;

			.gundong-bottom {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				display: flex;
				align-items: center;

				.line {
					flex: 1;
					border-bottom: 1px solid rgba(120, 77, 255, 0.4);
				}

				.gundong {
					display: flex;
					align-items: center;
					flex: 0 0 150px;
					padding: 0 12px;

					.icon {
						width: 32px;
						height: auto;
					}

					span {
						font-family: AlibabaPuHuiTi_2_75_SemiBold;
						font-weight: 600;
						font-size: 16px;
						color: #784DFF;
						line-height: 26px;
						text-align: left;
						font-style: normal;
					}
				}
			}

			.updates-content {
				max-width: 1360px;
				padding: 60px 40px 16px;
				margin: 0 auto;
				position: relative;

				.profile-icon {
					position: absolute;
					left: calc(50% + 480px);
					bottom: 16px;
					width: 280px;
					height: auto;
					max-width: 300px;
				}

				.updates-video {
					margin: 24px 0 0;

					video {
						width: 960px;
						height: auto;
						overflow: hidden;
						display: block;
						margin: 0 auto;
					}

					.text {
						margin-bottom: 28px;

						.title {
							font-family: AlibabaPuHuiTi_3_85_Bold;
							font-size: 40px;
							color: #FFFFFF;
							line-height: 40px;
							text-align: left;
							font-style: normal;
							margin-bottom: 32px;
						}

						.content {
							font-family: AlibabaPuHuiTi_3_45_Light;
							font-size: 16px;
							color: #FFFFFF;
							line-height: 26px;
							text-align: left;
							font-style: normal;
						}
					}
				}

				.updates-news {
					display: flex;
					justify-content: space-between;

					.item {
						flex: 0 0 calc(33.333% - 12px);
						margin-right: 18px;
						cursor: pointer;
						// overflow: hidden;
						border-radius: 12px;

						span {
							position: relative;
							display: inline-block;
							margin-bottom: 20px;
							overflow: hidden;
							border-radius: 12px;

							&::before {
								content: "";
								position: absolute;
								left: 0;
								top: 0;
								width: 100%;
								height: 100%;
								border-radius: 12px;
								border: 1px solid #1650FF;
								transition: .2s;
								z-index: 1;
							}

							img {
								width: 100%;
								height: auto;
								border-radius: 12px;
								transition: .3s;
							}


							&:hover::before {
								border: 2px solid #4D84FF;
							}

							&:hover {
								img {
									transform: scale(1.04);
								}
							}
						}

						.name {
							font-family: AlibabaPuHuiTi_3_65_Medium;
							font-size: 24px;
							color: #FFFFFF;
							line-height: 24px;
							text-align: left;
							font-style: normal;

							small {
								font-size: 24px;
								line-height: 24px;
							}
						}

						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}
	}

	@media screen and (max-width: 1660px) and (min-width: 1271px) {
		.updates .updates-content .profile-icon {
			display: none;
		}
	}

	@media screen and (max-width: 1270px) and (min-width: 768px) {
		.updates {

			.gundong-bottom {
				display: none;
			}

			.updates-content {

				.profile-icon {
					display: none;
				}

				.updates-video {
					display: block;

					.video-wrapper {
						width: 100%;
					}

					video {
						width: 100%;
						height: auto;
					}

					.text {
						margin-left: 0;
					}
				}
			}
		}
	}

	@media screen and (max-width: 767px) {
		.updates {
			width: 100%;
			background: #19234B;
			padding-top: 20px;
			padding-bottom: 40rpx;
			margin-top: -10px;
			position: relative;

			.gundong-bottom {
				display: none;
			}

			.updates-content {
				width: 100%;
				padding: 34px 18px 40px;
				box-sizing: border-box;
				margin: 0 auto;
				position: relative;

				.profile-icon {
					display: none;
				}

				.updates-video {
					margin: 14px 0 0;

					.video-wrapper {
						width: 678rpx;
						height: 381rpx;
					}

					.video {
						width: 678rpx;
						height: 381rpx;
						display: block;
					}

					.text {
						width: 100%;
						margin-bottom: 14px;

						.title {
							font-family: AlibabaPuHuiTi_3_85_Bold;
							font-size: 24px;
							color: #FFFFFF;
							line-height: 1;
							text-align: left;
							font-style: normal;
							margin-bottom: 12px;
						}

						.content {
							font-family: AlibabaPuHuiTi_3_45_Light;
							font-size: 12px;
							color: #FFFFFF;
							line-height: 19px;
							text-align: left;
							font-style: normal;
						}
					}
				}

				.updates-news {
					display: flex;
					justify-content: space-between;
					padding: 24px 0 0;
					border-top: 1px solid rgba(22, 80, 255, 0.6);

					.item {
						flex: 0 0 210rpx;
						cursor: pointer;

						span {
							position: relative;
							display: block;

							&::before {
								content: "";
								position: absolute;
								left: 0;
								top: 0;
								width: 100%;
								height: 100%;
								border-radius: 6px;
								border: 1px solid #1650FF;
							}

							&:hover::before {
								border-width: 2px;
							}
						}

						img {
							width: 100%;
							height: 140rpx;
							border-radius: 6px;
						}

						.name {
							font-family: AlibabaPuHuiTi_3_65_Medium;
							font-size: 13px;
							color: #FFFFFF;
							line-height: 18px;
							text-align: left;
							font-style: normal;
							margin-top: 8px;

							small {
								font-size: 13px;
								line-height: 18px;
							}
						}

						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}
	}
</style>